<template>
  <div>
    <div style="position: relative;">
      <el-tabs v-model="activeName">
        <el-tab-pane label="学生信息" name="student"><Students :schoolDistrictNo='currentCampus' /></el-tab-pane>
        <el-tab-pane label="教职工信息" name="teachingStaff"><SeachingStaff :schoolDistrictNo='currentCampus' /></el-tab-pane>
      </el-tabs>
      <div class="select">
        <label>选择校区：</label>
        <el-select size="mini" v-model="currentCampus" clearable>
          <el-option label="全部" value=""/>
          <el-option
          v-for="item in campusList"
          :key="item.no"
          :label="item.name"
          :value="item.no">
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import Students from './students'
import SeachingStaff from './teachingStaff'
import { getSchoolDistrictList } from '../js/base'
export default {
  components: { Students, SeachingStaff },
  data () {
    return {
      activeName: 'student',
      campusList: [],
      currentCampus: ''
    }
  },
  created () {
    this.getSchoolDistrict()
  },
  methods: {
    getSchoolDistrict () {
      getSchoolDistrictList().then(res => {
        this.campusList = res.data
        // this.currentCampus = res.data[0].no
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.select {
  position: absolute;
  right: 0;
  top: 5px;
}
</style>
